<template>
	<view class="contentBox">
		<view class="btitle">{{titName}}：</view>
		<input type="text"
			class="name_box"
			placeholder="请填写机柜的编号"
			@focus="isFocus = true"
			@blur="blurSerial"
			:class="{focusstyle:isFocus}"
			v-model="names"
		/>		
	</view>
</template>

<script>
	export default {
		props:{
			titName: {
				type: String
			},
			name: {
				type: String
			}
		},
		data(){
			return {
				names: this.name,
				isFocus: false
			}
		},
		methods:{
			blurSerial(){
				this.isFocus = false;
				if(this.names===''){
					uni.showToast({
						title:`${this.titName}不能为空`
					})
				}
				this.$emit('onNameChange',this.names)
			}
			
		}
	}
</script>

<style scoped lang="less">
	.contentBox {
		background:#F1F9FF;
		border-radius: 20rpx;
		width: 790rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	.btitle {
		color: #777777;
		font-size: 34rpx;
		padding:24rpx 2rpx 24rpx 36rpx;
		box-sizing: border-box;
	}
	.name_box {
		width:584rpx;
		height: 88rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		border: 4rpx solid #CCCCCC;
		border-radius:20rpx;
		font-size:36rpx;
		padding-left:45rpx;
		margin-left: 24rpx;
		color: #222;
		box-sizing: border-box;
	}
	.focusstyle {
		border: 4rpx solid #4F9AFF !important;
	}
</style>
